<template>
    <div ref="chartRef" class="trend-chart" />
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, onUnmounted, ref, watch } from 'vue'

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {
                name: "油库自查",
                total: 100,
                rectified: 80,
                unrectified: 20,
            }
        }
    },
})

const chartRef = ref()
const chartInstance = ref()
const chartData = ref({
    name: "油库自查",
    total: 100,
    rectified: 80,
    unrectified: 20,
})

watch(() => chartData.value, (newVal) => {
    chartInstance.value.setOption({
        series: [
            {
                name: "barData",
                data: newVal
            }
        ]
    })
}, { deep: true })


let angle = 0;//角度，用来做简单的动画效果的
const initData = () => {
    const data = {
        title: {
            text: `{c|${props.data.total}}\n{a|${props.data.name}}`,
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 18,
                        color: '#FFFFFF',
                    },
                    c: {
                        fontSize: 24,
                        fontWeight: '700',
                        color: '#ffffff',
                        lineHeight: 35
                    }
                }
            }
        },
        series: [
            {
                name: '数据',
                type: 'pie',
                radius: ['73%', '76%'], // 调整半径大小
                silent: true,
                clockwise: true,
                startAngle: 90,
                z: 0,
                zlevel: 0,
                label: {
                    position: "center",
                },
                data: [
                    {
                        name: "",
                        value: chartData.value.total,
                        itemStyle: {
                            color: { // 完成的圆环的颜色
                                colorStops: [{
                                    offset: 0,
                                    color: '#4FADFD' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#28E8FA' // 100% 处的颜色
                                }]
                            },

                        }
                    },
                ]
            },
            //内圆
            {
                type: 'pie',
                radius: '73%', // 调整内圆半径
                center: ['50%', '50%'],
                z: 1,
                itemStyle: {
                    color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
                        offset: 0,
                        color: '#4978EC'
                    },
                    {
                        offset: .5,
                        color: '#1E2B57'
                    },
                    {
                        offset: 1,
                        color: '#141F3D'
                    }
                    ], false),
                    label: { show: false },
                    labelLine: { show: false }
                },
                label: { show: false, },
                tooltip: { show: false },
                data: [100],
            },
            // 短线
            {
                name: "ring5",
                type: 'custom',
                radius: ['100%', '98%'],
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.84,
                            startAngle: (0 + angle) * Math.PI / 180,
                            endAngle: (90 + angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.84,
                            startAngle: (180 + angle) * Math.PI / 180,
                            endAngle: (270 + angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.94, // 调整为93%
                            startAngle: (270 + -angle) * Math.PI / 180,
                            endAngle: (40 + -angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    return {
                        type: 'arc',
                        shape: {
                            cx: api.getWidth() / 2,
                            cy: api.getHeight() / 2,
                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.94, // 调整为93%
                            startAngle: (90 + -angle) * Math.PI / 180,
                            endAngle: (220 + -angle) * Math.PI / 180
                        },
                        style: {
                            stroke: "#0CD3DB",
                            fill: "transparent",
                            lineWidth: 1.5
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {
                name: "ring5",
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    let x0 = api.getWidth() / 2;
                    let y0 = api.getHeight() / 2;
                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.94; // 调整为93%
                    let point = getCirlPoint(x0, y0, r, (90 + -angle))
                    return {
                        type: 'circle',
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4
                        },
                        style: {
                            stroke: "#0CD3DB",//粉
                            fill: "#0CD3DB"
                        },
                        silent: true
                    };
                },
                data: [0]
            },
            {
                name: "ring5",  //绿点
                type: 'custom',
                coordinateSystem: "none",
                renderItem: function (params, api) {
                    let x0 = api.getWidth() / 2;
                    let y0 = api.getHeight() / 2;
                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.94; // 调整为93%
                    let point = getCirlPoint(x0, y0, r, (270 + -angle))
                    return {
                        type: 'circle',
                        shape: {
                            cx: point.x,
                            cy: point.y,
                            r: 4
                        },
                        style: {
                            stroke: "#0CD3DB",      //绿
                            fill: "#0CD3DB"
                        },
                        silent: true
                    };
                },
                data: [0]
            },
        ]
    };
    data && chartInstance.value.setOption(data)
    // chartInstance.value.on('click', function (params) {
    //     console.log('111', params);
    // });
}
function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
    return {
        x: x1,
        y: y1
    }
}


let timer = null
onMounted(() => {
    chartInstance.value = echarts.init(chartRef.value)
    initData()

})
onUnmounted(() => {
    clearInterval(timer)
})

</script>

<style scoped lang="scss">
.trend-chart {
    width: 100%;
    height: 100%;
}
</style>